<template>
  <view :class="['container', { dark: theme == 'dark' }]">
    <view class="conta">
      <view :class="['maia', 'funs', { darksss: theme == 'dark' }]">
        <u-form
          :model="form"
          ref="uForm"
        >
          <!-- <u-line color="#5559691f"></u-line> -->

          <u-form-item
            :label="$t('bico.W585')"
            prop="content"
          >
            <u-input v-model="form.content" />
          </u-form-item>
          <u-line color="#5559691f"></u-line>
          <u-form-item prop="img">
            <!-- 最大上传图片大小 2M 尺寸最大 1024 X 1024 最大上传数量 6张 -->
            <u-upload
              @on-success="afterUpload"
              :action="action"
              @on-remove="onRemove"
              @on-change="chang"
              :upload-text="uploadText"
              :max-size="2 * 1024 * 1024"
              max-count="1"
            >
            </u-upload>
          </u-form-item>
        </u-form>
      </view>
      <!-- <u-gap height="80" bg-color=""></u-gap> -->

      <view class="maxi">
        <u-gap
          height="80"
          bg-color=""
        ></u-gap>
        <u-button
          type="primary"
          @click="submit"
          >{{ $t('bico.W606') }}</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { domain } from '../../common/domain.js';
import { mapState, mapActions, mapGetters } from 'vuex';
import uniPopup from '@/components/uni-popup2.vue';
import { tradeAppeal } from '../../common/apiString.js';
import { myMixins } from '@/common/myMixins.js'; //加入全局下拉刷新
export default {
  mixins: [myMixins],
  components: {
    uniPopup
  },
  data() {
    return {
      uploadText: this.$t('bico.W795'),
      action: domain + '/api/upload/img',
      form: {
        orderNo: '',
        content: '',
        img: ''
      },
      rules: {
        // img: [{
        // 	required: true,
        // 	message: '请上传凭证',
        // 	//trigger: ['change', 'blur'],
        // }],
        content: [
          {
            min: 10,
            message: this.$t('bico.W598'),
            trigger: 'change'
          }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: this.$t('bico.W605')
    });
    this.$utils.setTheme(this.theme);
    this.form.orderNo = option.orderNo;
    this.form.content = option.myType == '1' ? this.$t('bico.W599') : this.$t('bico.W600');
  },
  methods: {
    chang(res, index, lists, name) {
      console.log(res);
    },
    onRemove(index, lists) {
      this.form.img = '';
    },
    afterUpload(data, index, lists, name) {
      console.log(data);
      if (data.code == 200) {
        this.$utils.showLayer(this.$t('bico.W601'));
        this.form.img = data.data.src;
      } else {
        this.$utils.showLayer(msg);
      }
      console.log(data);
    },
    //路由开始
    submit() {
      if (this.form.img == '') {
        this.$utils.showLayer(this.$t('bico.W602'));
      }
      this.$refs.uForm.validate(valid => {
        if (valid) {
          // uni.showLoading()
          this.$utils.initDataToken(
            {
              url: tradeAppeal,
              data: {
                orderNo: this.form.orderNo,
                content: this.form.content,
                img: this.form.img
              },
              type: 'post'
            },
            (res, msg) => {
              // uni.hideLoading()
              this.$utils.showLayer(this.$t('bico.W603'));
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }
          );
        } else {
          console.log(this.$t('bico.W604'));
        }
      });
    },
    // submit() {
    // 	this.$refs.uUpload.upload();
    // 	let files = [];
    // 	// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
    // 	files = this.$refs.uUpload.lists.filter(val => {
    // 		return val.progress == 100;
    // 	})
    // 	// 如果您不需要进行太多的处理，直接如下即可
    // 	// files = this.$refs.uUpload.lists;
    // 	console.log(files)
    // },

    funsItemClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url: '/'
        });
      }
    }
    //路由结束
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
};
</script>

<style lang="scss">
page {
  background: #f7f7f7;
}

.container {
  padding: 2vw;
  width: 100%;
  height: 100%;

  .u-list-item {
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin: 5px;
    background: #eceef5;
    position: relative;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .u-form-item {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    font-size: 14px;
    color: #9e9e9e;
    box-sizing: border-box;
    line-height: 35px;
    flex-direction: column;
  }

  .u-border-bottom:after,
  .u-border-left:after,
  .u-border-right:after,
  .u-border-top-bottom:after,
  .u-border-top:after,
  .u-border:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 199.8%;
    height: 199.7%;
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    border: 0 solid #e4e7ed !important;
    z-index: 2;
  }

  .conta {
    .maia {
      padding: 2vw;
    }
  }

  .slot-btn {
    width: 329rpx;
    height: 140rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(244, 245, 246);
    border-radius: 10rpx;
  }

  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }
}
</style>
